<template>
  <div class="home-page">
    <main class="flex items-start justify-center flex-col">
      <!-- Main content of the homepage goes here -->
      <div
        class="text-white text-[150px] leading-[150px] text-center w-full font-bold"
      >
        超级
      </div>
      <div
        class="text-[150px] uneatable-charts leading-[150px] text-center w-full font-bold"
      >
        无敌图表
      </div>
    </main>
    <DemoCategory />
  </div>
</template>

<script>
import DemoCategory from "./components/DemoCategory.vue";

export default {
  name: "Home",
  components: {
    DemoCategory,
  },
};
</script>

<style scoped lang="scss">
.home-page {
  margin-top: $featuresMarginTopSpace;
}
.uneatable-charts {
  background: linear-gradient(90deg, #00bce6, #2962ff 50.31%, #d500f9);
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: no-repeat;
  color: transparent;
}
</style>
